<template>
  <div>
    <header class="app-header">
      <span>设置</span>
    </header>
    <section class="setting-section">
      <router-link to="/login" style="text-decoration: none" v-if="!isSee">
        <div class="setting-div">登录</div>
      </router-link>
      <div class="sz-zhuye" v-else>
        <div class="sz-zhuye-top">
          <div class="sz-touxiang">
            <img src="../../assets/logo.png" alt="" />
          </div>
          <div class="sz-name">
            <h2>
              {{ list.name }} <small class="small" @click="logout">退出</small>
            </h2>
            <span class="sz-grzy">个人主页 ></span>
          </div>
        </div>
        <div class="login-box">
          <ul>
            <li>
              <b>179</b>
              <div>头条</div>
            </li>
            <li>
              <b>249</b>
              <div>获赞</div>
            </li>
            <li>
              <b>740</b>
              <div>粉丝</div>
            </li>
            <li>
              <b>17</b>
              <div>关注</div>
            </li>
          </ul>
        </div>
      </div>
      <div class="login-ul">
        <ul>
          <li>
            <i class="iconfont iconnotification"></i>
            <div>消息通知</div>
          </li>
          <li>
            <i class="iconfont iconfavorite"></i>
            <div>收藏</div>
          </li>
          <li>
            <i class="iconfont icontime"></i>
            <div>浏览历史</div>
          </li>
          <li>
            <i class="iconfont icondownload"></i>
            <div>下载管理</div>
          </li>
        </ul>
      </div>
    </section>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { getItem, removeItem } from "../../utils/sessiton";
export default {
  data() {
    return {};
  },
  computed: {
    ...mapState("users", ["list"]),
    isSee() {
      return !!getItem();
    },
  },
  methods: {
    logout() {
      removeItem();
      window.history.go(0)
    },
  },
};
</script>

<style scoped>
.setting-div {
  width: 100px;
  height: 100px;
  background-color: #ff3539;
  border-radius: 50px;
  margin: auto;
  text-align: center;
  line-height: 100px;
  font-size: 22px;
  color: white;
  margin: 30px auto;
}

.setting-ul {
  list-style: none;
  display: flex;
  padding: 10px;
  justify-content: space-around;
  background-color: white;
  border-radius: 6px;
}

.setting-ul li {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0;
}

.setting-ul li i {
  font-size: 22px;
  color: coral;
  margin: 0 0px 6px 0;
}

.setting-section {
  overflow: hidden;
  padding: 0 15px;
}

.setting-loggin img {
  width: 50px;
  border-radius: 50px;
}

.sz-zhuye {
  margin-top: 20px;
}

.sz-zhuye-top {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.sz-touxiang {
  width: 50px;
  height: 50px;
  margin-left: 10px;
}

.sz-touxiang img {
  width: 50px;
  height: 50px;
  border-radius: 30px;
}

.login-ul > ul {
  margin: 0;
  padding: 10px;
  display: flex;
  background-color: #fff;
  border-radius: 5px;
}

.login-ul > ul > li {
  display: flex;
  list-style: none;
  flex-grow: 1;
  height: 60px;
  text-align: center;
  flex-direction: column;
  justify-content: space-around;
}

.login-ul ul li i {
  font-size: 30px;
  color: rgb(255, 45, 45);
}

.login-ul ul li div {
  font-size: 14px;
}

.sz-name {
  flex-grow: 1;
  margin-left: 15px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.sz-grzy {
  color: #999;
  font-size: 13px;
}

.sz-grzy i {
  font-size: 12px;
}

.sz-zhuye-bottom {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.sz-font {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.login-box > ul {
  margin: 0;
  padding: 16px;
  display: flex;
}

.login-box > ul > li {
  display: flex;
  list-style: none;
  flex-grow: 1;
  text-align: center;
  flex-direction: column;
  justify-content: space-around;
}

.login-box ul li div {
  font-size: 12px;
  color: #ccc;
}

.sz-font div {
  font-size: 16px;
}

.sz-font span {
  font-size: 13px;
  color: #999;
  margin-top: 5px;
}

small.small {
  font-size: 14px;
  color: #ccc;
  margin-left: 10px;
}
</style>